<template>
  <div ref="container" style="height: 150px;"></div>
</template>

<script setup>
import { Line } from '@antv/g2plot';
import { onMounted, useTemplateRef, defineProps } from 'vue';

const props = defineProps({
  data: Object
})

const cont = useTemplateRef('container')

// 异常转账、赌博违规、伪冒注册、商户违规、团伙套现以及黄牛营销

onMounted(() => {
  const data = [
    {
      "year": "202410",
      "value": 0,
      "category": "商户违规"
    },
    {
      "year": "202411",
      "value": 100,
      "category": "商户违规"
    },
    {
      "year": "202412",
      "value": 150,
      "category": "商户违规"
    },
    {
      "year": "202410",
      "value": 0,
      "category": "团伙套现"
    },
    {
      "year": "202411",
      "value": 120,
      "category": "团伙套现"
    },
    {
      "year": "202412",
      "value": 150,
      "category": "团伙套现"
    },
    {
      "year": "202410",
      "value": 0,
      "category": "黄牛营销"
    },
    {
      "year": "202411",
      "value": 120,
      "category": "黄牛营销"
    },
    {
      "year": "202412",
      "value": 180,
      "category": "黄牛营销"
    },
  ];

  const line = new Line(cont.value, {
    data,
    xField: 'year',
    yField: 'value',
    seriesField: 'category',
    xAxis: {
      // type: 'string',
    },
    yAxis: {
      label: {
        // 数值格式化为千分位
        formatter: (v) => `${v}`.replace(/\d{1,3}(?=(\d{3})+$)/g, (s) => `${s},`),
      },
    },
  });

  line.render();
})
</script>
